<template>
	<div class="global-header flex-y-center h-68px">
		<!--左侧菜单-->
		<div class="flex-y-center flex-1-hidden h-full">
			<!--菜单收起-->
			<div class="ml-1 px-3 flex-center cursor-pointer transition-base" @click="themeStore.toggleSiderCollapse">
				<n-icon size="18" v-if="themeStore.sider.collapsed">
					<MenuUnfoldOutlined />
				</n-icon>
				<n-icon size="18" v-else>
					<MenuFoldOutlined />
				</n-icon>
			</div>
			<!--刷新-->
			<div class="mr-1 px-3 flex-center cursor-pointer transition-base">
				<n-icon size="18">
					<ReloadOutlined />
				</n-icon>
			</div>
			<n-breadcrumb>
				<n-breadcrumb-item>
					<n-icon :component="BookIcon" /> 北京总行</n-breadcrumb-item>
				<n-breadcrumb-item>
					<n-icon :component="BookIcon" /> 天津分行</n-breadcrumb-item>
				<n-breadcrumb-item>
					<n-icon :component="BookIcon" /> 平山道支行</n-breadcrumb-item>
			</n-breadcrumb>
		</div>
		<div class="flex justify-end h-full">
			<github-site></github-site>
			<global-search></global-search>
			<theme-mode></theme-mode>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useThemeStore } from "@/store";
import {
	MenuFoldOutlined,
	MenuUnfoldOutlined,
	ReloadOutlined
} from '@vicons/antd';
import {
	BookOutline as BookIcon,
} from '@vicons/ionicons5';
import GlobalSearch from './components/full-screen.vue';
import GithubSite from "./components/github-site.vue";
import ThemeMode from "./components/theme-mode.vue";

defineOptions({ name: "GlobalHeader" });

const themeStore = useThemeStore();


</script>

<style lang="scss" scoped>
.global-header {
	box-shadow: 0 1px 2px rgb(0 21 41 / 8%);
}

.navie-fixed-header {
	position: fixed;
	top: 0;
	right: 0;
}

.navie-layout-header {
	height: 68px;
	line-height: 68px;
	box-shadow: 0 1px 4px #00152914;
	margin: 0 12px;
}

.header-border-radius {
	border-radius: 0 0 12px 12px;
}
</style>
